<template>
  <!-- <div> -->
  <IviewModal
    :transfer="false"
    :title="title"
    v-model="status"
    @on-ok="handleSubmit('formValidate')"
    @on-cancel="handleReset('formValidate')"
  >
    <div class="form">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
        <Form-item v-for="(item, index) in formList" :key="index" :label="item.label" :prop="item.model">
          <Input
            v-if="item.type === 'input'"
            :style="{ width: item.width ? item.width : '224px' }"
            :readonly="item.readonly"
            :type="item.cusType ? item.cusType : 'text'"
            v-model="formValidate[item.model]"
            :placeholder="item.placeholder"
          />
          <div
            v-if="item.type === 'noipt'"
          >{{formValidate[item.model]||'-'}}</div>
          <Select
            v-else-if="item.type === 'select'"
            :style="{ width: item.width ? item.width : '224px' }"
            v-model="formValidate[item.model]"
          >
            <Option v-for="(item1, index) in item.options" :value="item1.id ? item1.id : item1.value" :key="index">{{
              item1.name ? item1.name : item1.label
            }}</Option>
          </Select>
           <!-- <Select
            v-else-if="item.type === 'selectTree'"
            :style="{ width: item.width ? item.width : '224px' }"
            v-model="selectLabel"
            
          >
              <Option :value="selectLabel" :key="selectLabel">
                <Tree key="1" :data="item.options" @on-select-change="handleSelectChange($event,item)"></Tree>
              </Option>
              
          </Select> -->
          <Radio-group v-else-if="item.type === 'radio'" v-model="formValidate[item.model]">
            <Radio v-for="(item1, index) in item.options" :key="index" :label="item1.key">{{ item1.label }}</Radio>
          </Radio-group>
          <div v-else-if="item.slot">
            <slot :name="item.slot"></slot>
          </div>
        </Form-item>
      </Form>
    </div>
  </IviewModal>
  <!-- </div> -->
</template>

<script>
import IviewModal from '_c/iview/IviewModal'
export default {
    name: 'validateModalForm',
    props: {
        modalFormStatus: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        formValidate: {
            type: Object,
            default: () => {},
        },
        ruleValidate: {
            type: Object,
            default: () => {},
        },
        formList: {
            type: Array,
            default: () => [],
        },
    },
    components: {
        IviewModal,
    },
    watch: {
        modalFormStatus: {
            //   handler(val){
            //       console.log(val)
            //       this.status =val
            //       this.$forceUpdate();
            //   },
            //   deep:true,
            //   immediate:true
        },
    },
    data() {
        return {
            status: false,
            selectVal:'',
            selectLabel:''
        }
    },
    mounted() {},
    methods: {
        normalizer(node) {
            return {
                id: node.id,
                label: node.title,
                children: node.children.length>0?node.children:undefined,
            }
        },
        // 点击树节点时触发
        handleSelectChange(data, item) {
            console.log(data)
            console.log(item)
            if (this.selectVal === data[0].id) {
                // 重复点击同一个节点时依然保持选中状态
                item.selected = true;
            } else {
                // 不需要重复点击同一个节点时重新赋值
                this.selectLabel = data[0].title;
                this.selectVal = data[0].id;
                this.formValidate[item.model] = data[0].id
                console.log(this.selectLabel)
                // this.$emit("on-select-change", data);
            }
        },
        handleSubmit(name) {
            console.log(this.formValidate)
            this.$refs[name].validate((valid) => {
                if (valid) {
                    // this.$Message.success('提交成功!')
                    this.$emit('setForm', this.formValidate)
                } else {
                    this.$Message.error('表单验证失败!')
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields()
            this.status = false
        },
    },
}
</script>

<style lang="less" scoped>
.form {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
/deep/.ivu-radio-inner:after {
  background: #66bc7a !important;
}
/deep/.ivu-radio-checked {
  .ivu-radio-inner {
    border-color: #66bc7a !important;
  }
}
/deep/.ivu-form-item-content {
  display: flex;
}
</style>
